<!-- 表格轮播组件  -->
<template>
  <div class="production-swiper-table">
    <!-- 表格外层开始 -->
    <div class="table-wrapper" :style="{ 'min-height': contentHeight }">
      <!-- 表头开始 -->
      <div class="table-header" v-if="showHeader">
        <span class="table-header-item" v-for="(item, index) in widths" :key="index" :style="{ width: widths[index] }">{{
          titles[index] }}</span>
      </div>
      <!-- 表头结束 -->
      <!-- 表格内容开始 -->
      <div class="table-content">
        <vue-seamless-scroll class="wrap" :data="tableData" :class-option="classOption">
          <ul class="ul-item">
            <li v-for="(item, index) in tableData" :key="index" class="li-item">
              <span v-for="(v, i) in item" :key="i" :class="['li-item-content', v.type == 'order' ? 'title' : '']"
                :style="{ width: widths[i] }">
                <span v-if="v.type === 'percent'" class="g-progress" :style="{ '--progress': item[i].value }"></span>
                {{ item[i].value }}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <!-- 表格内容结束 -->
    </div>
    <!-- 表格外层结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    classOption: {
      type: Object,
      default: () => {
        return {
          // singleHeight: 30,
          step: 1,
        };
      },
    },
    tableData: {
      type: Array,
      default: () => [
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "10%",
          },
        ],
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "50%",
          },
        ],
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "50%",
          },
        ],
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "90%",
          },
        ],
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "90%",
          },
        ],
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "90%",
          },
        ],
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "90%",
          },
        ],
        [
          {
            type: "order",
            value: "123",
          },
          {
            type: "name",
            value: "小明",
          },
          {
            type: "size",
            value: "50*50*50",
          },
          {
            type: "department",
            value: "房间1",
          },
          {
            type: "plan",
            value: "200.0000",
          },
          {
            type: "in_store",
            value: "10.000000",
          },
          {
            type: "making",
            value: "10.0000",
          },
          {
            type: "status",
            value: "已读",
          },
          {
            type: "percent",
            value: "90%",
          },
        ],
      ],
    },
    titles: {
      type: Array,
      default: () => [
        "编号",
        "产品名称",
        "大小",
        "部门",
        "计划数",
        "已成交",
        "值",
        "状态",
        "完成率",
      ],
    },
    widths: {
      type: Array,
      default: () => [
        "20%",
        "10%",
        "10%",
        "10%",
        "10%",
        "10%",
        "10%",
        "10%",
        "10%",
      ],
    },
    // 表格的高度
    contentHeight: {
      type: String,
      default: "200px",
    },
    // 是否展示表格头
    showHeader: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    vueSeamlessScroll,
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" >
//@import url(); 引入公共css类
html {

  font-size: 192px;
}

body {
  background-color: #114cfb;
}

.production-swiper-table {
  position: relative;
  margin: 0 auto;
  width: 100%;
  font-size: 0.06rem;
  color: white;

  .table-wrapper {
    position: absolute;
    top: 0.2rem;
    width: 100%;

    .table-header {
      display: flex;
      align-items: center;
      margin: 0 auto;
      height: 0.21rem;
      width: 98%;
      background: #05076b;
      opacity: 1;
      border: 0.01rem solid #3655da;

      .table-header-item {
        text-align: center;
        font-size: 0.07rem;
        font-weight: bold;
      }
    }

    .table-content {
      width: 98%;
      margin: 0 auto;

      .wrap {
        height: 1.6rem;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;

        ul {
          list-style: none;
          padding: 0;
          margin: 0 auto;

          li {
            display: flex;
            align-items: center;

            .li-item-content {
              display: inline-block;
              height: 0.21rem;
              line-height: 0.21rem;
              text-align: center;
            }

            .title {
              color: #55cbfd;
            }
          }

          li:nth-child(odd) {
            background: #030f61;
          }
        }
      }
    }
  }
}

.g-progress {
  display: inline-block;
  width: 0.6rem;
  height: 0.05rem;
  background: linear-gradient(90deg, #0335ff, #01b4ff, #1d2772 var(--progress));
  border-radius: 0.02rem;
}
</style>